<template>
    <div>
        <div>{{productData.product_scode ? productData.product_scode : '--'}}</div>
        <div>{{productData.product_name ? productData.product_name : '--'}}</div>
        <div>
            <input type="hidden" v-model="productData.id" name="product_id[]">
            <el-select v-model="productData.qty" name="qty[]" class="filter-item" style="width: 60px;" size="mini" @change="changeQty">
                <el-option v-for="(option, index) in quantOptions" :key="index" :label="option" :value="option" />
            </el-select>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        product: {
            type: Object,
            default () {
                return {
                    qty: 1
                }
            }
        },
        idx: Number,
        groupData: Object
    },
    data () {
        return {
            quantOptions: [0, 1, 2, 3],
            productData: [{
                id: '',
                product_scode: '',
                product_name: '',
                qty: 1
            }],
            groups: this.groupData
        }
    },
    created () {
        let num = []
        if (this.productData.mqty) {
            for (let i = 0; i < this.productData.mqty + 1; i++) {
                num.push(i)
            }
            this.quantOptions = num
        }
        this.productData = JSON.parse(JSON.stringify(this.product))
        this.productData.qty = this.product.dqty ? this.product.dqty : 1
    },
    watch: {
        product: function (val) {
            console.log(44444)
            this.productData = JSON.parse(JSON.stringify(val))
            this.productData.qty = val.qty ? val.qty : val.dqty ? val.dqty : 1
        }
    },
    methods: {
        changeQty () {
            //this.$emit('ret-group', this.productData, this.idx)
            //this.groups.product[this.idx] = this.productData
            this.$emit('ret-group', this.idx, this.productData)
        }
    }
}
</script>
